<template>
  <div class="home">
    <div id="map"></div>
    <div
      v-for="(i,key) in geoCoordMap"
      :key="key"
      :id="i.id"
      style="width: 200px;height:200px;"
    ></div>
  </div>
</template>

<script>
import "ol/ol.css";
import gisModel from "../../gisApi";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import Overlay from "ol/Overlay";
import XYZ from "ol/source/XYZ";
import { transform } from "ol/proj";
import gisApi from "../../gisApi";
// import EchartsComponent from "./echartsComponent.vue";
import echarts from "echarts";
export default {
  data() {
    return {
      map: null,
      data: [
        {
          name: "第一社区",
          value: 8,
        },
        {
          name: "第二社区",
          value: 4,
        },
        {
          name: "第三社区",
          value: 9,
        },
        {
          name: "第四社区",
          value: 2,
        },
        {
          name: "第五社区",
          value: 11,
        },
        {
          name: "第六社区",
          value: 7,
        },
      ],
      geoCoordMap: [
        {
          name: "第一社区",
          coordinate: [12727733.392080443, 3568706.308521112],
          id: "one",
          color: "#009BA3",
          value: [13,21,32,42,12,23],
        },
        {
          name: "第二社区",
          coordinate: [12729705.467351884, 3568954.728863039],
          id: "two",
          color: "#0398AA",
          value: [32,12,42,14,51,21],
        },
        {
          name: "第三社区",
          coordinate: [12727572.874146093, 3566627.2212934387],
          id: "three",
          color: "#02849F",
          value: [22,23,41,21,33,21],
        },
        {
          name: "第四社区",
          coordinate: [12729147.477103718, 3566417.019465654],
          id: "four",
          color: "#0476AA",
          value: [21,42,12,52,21,51],
        },
        {
          name: "第五社区",
          coordinate: [12726495.112018114, 3567387.769783193],
          id: "five",
          color: "#03669D",
          value: [43,2,23,14,52,12],
        },
        {
          name: "第六社区",
          coordinate: [12731562.11067985, 3565503.59691933],
          id: "six",
          color: "#06589D",
          value: [33,32,51,22,12,33],
        },
      ],
    };
  },
  mounted() {
    this.mapInit();
  },
  components: {},
  methods: {
    //数据转化
    convertData(data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = this.geoCoordMap[data[i].name];
        geoCoord = transform(geoCoord, "EPSG:3857", "EPSG:4326");
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value),
          });
        }
      }
      return res;
    },
    //初始化地图
    mapInit() {
      var source = new XYZ({
        url: gisModel.layerConfig.tileUrl,
      });
      this.map = new Map({
        target: "map",
        layers: [
          new TileLayer({
            source: source,
          }),
        ],
        view: new View({
          projection: "EPSG:3857",
          extent: gisApi.mapConfig.extent,
          center: gisApi.mapConfig.center,
          minZoom: 1,
          maxZoom: 19,
          zoom: 15,
        }),
      });
      this.geoCoordMap.forEach((item) => {
        var myChart = echarts.init(document.getElementById(item.id));
        var option = {
          tooltip: {
            trigger: "axis",
          },
          xAxis: { type: "category", data: ['第一社区','第二社区','第三社区','第四社区','第五社区','第六社区'] },
          yAxis: [{ name: "", type: "value", show: false }],
          series: [
            {
              name: this.geoCoordMap[0].name,
              type: "line",
              itemStyle: { normal: { color: this.geoCoordMap[0].color } },
              data: item.value,
            },
            {
              name: this.geoCoordMap[1].name,
              type: "line",
              itemStyle: { normal: { color: this.geoCoordMap[1].color } },
              data: item.value,
            },
            {
              name: this.geoCoordMap[2].name,
              type: "line",
              itemStyle: { normal: { color: this.geoCoordMap[2].color } },
              data: item.value,
            },
            {
              name: this.geoCoordMap[3].name,
              type: "line",
              itemStyle: { normal: { color: this.geoCoordMap[3].color } },
              data: item.value,
            },
            {
              name: this.geoCoordMap[4].name,
              type: "line",
              itemStyle: { normal: { color: this.geoCoordMap[4].color } },
              data: item.value,
            },
            {
              name: this.geoCoordMap[5].name,
              type: "line",
              itemStyle: { normal: { color: this.geoCoordMap[5].color } },
              data: item.value,
            },
          ],
        };
        myChart.setOption(option);
        var bar = new Overlay({
          projection: "EPSG:3857",
          position: item.coordinate,
          positioning: "center-center",
          element: document.getElementById(item.id),
        });
        this.map.addOverlay(bar);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  height: 100%;
}
#map {
  height: 100%;
}
</style>
